<template>
  <div>
    <div flex>
      <!-- <i class="el-icon-plus iconButton add" @click="add"></i>
      <i class="el-icon-delete iconButton del" @click="del"></i> -->
    </div>
    <base-table ref="customtable" :border="true" :showIndex="true" :tabLoading.sync="tabLoading" :tableData="tableData"
      :tableColumn="tableColumn" :funData="[]" :indexOperate="true" @onCellClick="getCell" @onSelectionChange="getSelect"
      @radioChange="singleSelection" @newRow="add" :showsummary="true" :SummariesIndex="[7, 8, 9, 11, 12, 13]">
      <!--  单选  -->
      <template v-slot:option="{ row }">
        <el-radio v-model="radio" :label="row.$index" @click="radioChange"></el-radio>
      </template>
      <!--  序号  -->
      <template v-slot:index="{ row }">
        <span>{{ row.$index + 1 }}</span>
      </template>
      <!--  是否新产品  -->
      <!-- <template v-slot:isCustomMade="{ row }">
        <el-switch
          v-model="row.isCustomMade"
          active-color="#55aaff"
          inactive-color="#eaecf0"
          :active-value="1"
          :inactive-value="0"
        >
        </el-switch>
      </template> -->
      <!--  是否定制机  -->
      <!-- <template v-slot:isNewProduct="{ row }">
        <el-switch
          v-model="row.isNewProduct"
          active-color="#55aaff"
          inactive-color="#eaecf0"
          :active-value="1"
          :inactive-value="0"
        >
        </el-switch>
      </template> -->
      <!--  设备编码  -->
      <!-- <template v-slot:cEQCode="{ row }">
        <el-input v-model="row.cEQCode" clearable type="text"></el-input>
      </template> -->
      <!--  存货编码  -->
      <template v-slot:invCode="{ row }">
        <div flex @click="elDialogClick(row.index)">
          <p class="single" :style="{ color: row.invCode ? '#000' : '#c0c4cc' }" style="width: 100%">
            {{ row.invCode ? row.invCode : "请点击选择" }}
          </p>
          <i class="el-icon-more" style="margin-top: 6px;color: #c0c4cc"></i>
        </div>
      </template>
      <!--  数量  -->
      <template v-slot:quantity="{ row }">
        <el-input v-model="row.quantity" @input="(v) => (row.quantity = v.replace(/[^\d]/g, ''))">
        </el-input>
      </template>
      <!--  单价  -->
      <template v-slot:unitPrice="{ row }">
        <el-input v-model="row.unitPrice" @input="(v) =>
          (row.unitPrice = v
            .replace(/[^\d.]/g, '')
            .replace(/\.{2,}/g, '.')
            .replace('.', '$#$')
            .replace(/\./g, '')
            .replace('$#$', '.')
            .replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3')
            .replace(/^\./g, ''))
          ">
        </el-input>
      </template>
      <!-- 无税单价 -->
      <!-- <template v-slot:nUnitPeice="{ row }">
        <span>{{
          (row.unitPrice - (row.unitPrice * row.tax) / 100).toFixed(2)
        }}</span>
      </template> -->
      <!--  金额  -->
      <!-- <template v-slot:money="{ row }">
        <span>{{ (row.quantity * row.unitPrice).toFixed(2) }}</span>
      </template> -->
      <!-- 税额 -->
      <!-- <template v-slot:taxMoney="{ row }">
        <span>{{
          ((row.quantity * row.unitPrice * row.tax) / 100).toFixed(2)
        }}</span>
      </template> -->
      <!-- 无税金额 -->
      <!-- <template v-slot:nUnitMoney="{ row }">
        <span>{{
          (row.quantity * (row.unitPrice - (row.unitPrice * row.tax) / 100)).toFixed(
            2
          )
        }}</span>
      </template> -->
      <!--  税率  -->
      <template v-slot:tax="{ row }">
        <el-select v-model="row.tax" placeholder="请选择">
          <el-option v-for="item in taxOptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </template>
      <!--  备注  -->
      <template v-slot:detail_Remark="{ row }">
        <el-input v-model="row.detail_Remark" clearable></el-input>
      </template>
      <template v-slot:operate="{ row }">
        <el-tooltip class="item" effect="dark" content="删除当前行" placement="top">
          <i class="el-icon-delete" style="color: red; font-size: 16px; margin-right: 10px" @click="del(row)"></i>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="复制当前行" placement="top">
          <i class="el-icon-document-copy" style="color: #1f63ff; font-size: 16px" @click="duplicate(row)"></i>
        </el-tooltip>
      </template>
    </base-table>
    <!-- 弹窗 -->
    <base-dialog :closeEscape="true" :showClose="true" :closeModal="false"
      @handleConfirmClick="equipmenthandleConfirmClick" :dialogVisible.sync="equipmentdialog" class="userDialog"
      title="选择设备编码档案" width="90%" top="10vh" :footerShow="true">
      <base-choice :tableColumn="equipmentDatatableColumn" :tableData="equipmentData" @getTableList="getTableList"
        ref="choice" :choiceDialog="equipmentdialog" @onQuery="onQuery" @handleNodeClick="handleNodeClick"
        v-loading="loading" :menuData="itemTree"></base-choice>
    </base-dialog>
  </div>
</template>
<script>
import baseTable from "@/components/base/baseTable";
import basePage from "@/components/base/basePage";
import baseChoice from "@/components/base/baseChoice/index.vue";
import baseDialog from "@/components/base/BaseNewDialog/index.vue";
import configData from "./configData";
import { OrganGetStock, OrganDelContract, stockTree } from "@/api/apis/organization";
export default {
  name: "equipmentDetails",
  components: {
    baseTable,
    basePage,
    baseDialog,
    baseChoice,
  },
  data() {
    return {
      tableHeight: "70vh",
      optionIndex: "",
      equipmentData: [],
      equipmentDatatableColumn: [
        {
          label: "存货编码",
          prop: "invCode",
          tooltip: true,
          width: "150",
        },
        {
          label: "助记码",
          prop: "zjm",
          tooltip: true,
          width: "120",
        },
        {
          label: "存货名称",
          prop: "invName",
          tooltip: true,
          width: "150",
        },
        {
          label: "计量单位",
          prop: "unitName",
          tooltip: true,
        },
        {
          label: "规格",
          prop: "specification",
          tooltip: true,
        },
        {
          label: "存货分类",
          prop: "invClassify",
          tooltip: true,
          width: "120",
        },
        {
          label: "税率",
          prop: "tax",
          tooltip: true,
          width: "120",
        },
      ],
      treeHight: "350px",
      menuData: [
        {
          label: "新集智",
          ParentOrganName: "新集智",
          o_OrganCode: "002",
          children: [
            {
              label: "销售部",
              ParentOrganName: "销售部",
              o_OrganCode: "03",
              children: [],
            },
          ],
        },
      ],
      equipmentdialog: false,
      tabLoading: false,
      loading: false,
      optionData: {},
      radio: false,
      tableData: [],
      taxOptions: [
        {
          value: "9",
          label: "9",
        },
        {
          value: "13",
          label: "13",
        },
        {
          value: "17",
          label: "17",
        },
      ],
      tableColumn: [
        // {
        //   label: "序号",
        //   prop: "index",
        //   tooltip: true,
        //   width: "100",
        // },
        // {
        //   label: "是否新产品",
        //   prop: "isCustomMade",
        //   tooltip: true,
        //   width: "90",
        // },
        // {
        //   label: "是否定制机",
        //   prop: "isNewProduct",
        //   tooltip: true,
        //   width: "90",
        // },
        {
          label: "存货编码",
          prop: "invCode",
          tooltip: true,
          width: "110",
        },
        {
          label: "设备名称",
          prop: "invName",
          tooltip: true,
          width: "120",
        },
        // {
        //   label: "设备编码",
        //   prop: "cEQCode",
        //   tooltip: true,
        //   width: "120",
        // },
        // {
        //   label: "规格",
        //   prop: "InvStd",
        //   tooltip: true,
        // },
        {
          label: "计量单位",
          prop: "unit",
          tooltip: true,
        },
        {
          label: "数量",
          prop: "quantity",
          tooltip: true,
          width: "120",
        },
        {
          label: "单价",
          prop: "unitPrice",
          tooltip: true,
          width: "120",
        },
        {
          label: "金额",
          prop: "money",
          tooltip: true,
          width: "120",
        },
        {
          label: "税率",
          prop: "tax",
          tooltip: true,
          width: "95",
        },
        {
          label: "税额",
          prop: "taxMoney",
          tooltip: true,
          width: "120",
        },
        {
          label: "无税单价",
          prop: "nUnitPeice",
          tooltip: true,
          width: "120",
        },
        {
          label: "无税金额",
          prop: "nUnitMoney",
          tooltip: true,
          width: "120",
        },
        {
          label: "备注",
          prop: "detail_Remark",
          tooltip: true,
          width: "120",
        },
        {
          label: "操作",
          prop: "operate",
          width: "70",
          fixed: "right"
        },
      ],
      pageModel: {
        page: 1, //当前页码
        limit: 10, //每页显示多少
        cusClassify: "", //树形分类id
        Sequence: "", //排列方式
        SequenceName: "", //需要排列的字段名
      },
      choiceIndex: "false",
      isCustomMade: "",
      selectRow: {},
      itemTree: []
    };
  },
  watch: {
    tableData: {
      deep: true,
      handler(newVal, oldVal) {
        newVal.forEach((el, index) => {
          el.nUnitPeice = (el.unitPrice - (el.unitPrice * el.tax) / 100).toFixed(2)
          el.taxMoney = ((el.quantity * el.unitPrice * el.tax) / 100).toFixed(2)
          el.nUnitMoney = (el.quantity * (el.unitPrice - (el.unitPrice * el.tax) / 100)).toFixed(2)
          el.money = (el.quantity * el.unitPrice).toFixed(2)
        });
      }
    }
  },
  computed: {},
  created() { },
  mounted() {
    //挂载window.onresize事件(动态设置table高度)
    // let _this = this;
    // window.onresize = () => {
    //   if (_this.resizeFlag) {
    //     clearTimeout(_this.resizeFlag);
    //   }
    //   _this.resizeFlag = setTimeout(() => {
    //     _this.getTableHeight();
    //     _this.resizeFlag = null;
    //   }, 100);
    // };
  },
  methods: {
    //计算table高度(动态设置table高度)
    getTableHeight() {
      let tableH = 180; //距离页面下方的高度
      let tableHeightDetil = window.innerHeight - tableH;
      if (tableHeightDetil <= 300) {
        this.windowHight = 300;
      } else {
        this.windowHight = window.innerHeight - tableH;
      }
      console.log(this.windowHight, "tableHeight");
    },
    // 树状图点击事件
    handleNodeClick(data) {
      this.pageModel.cusClassify = data.id
      this.OrganGetStock()
    },
    //确定按钮
    equipmenthandleConfirmClick() {
      if (!this.$refs.choice.optionData) {
        this.$vmNews("请选择一条");
        return;
      }
      this.$set(
        this.tableData[this.optionIndex],
        "unit",
        this.$refs.choice.optionData.unitName
      );
      this.$set(
        this.tableData[this.optionIndex],
        "invCode",
        this.$refs.choice.optionData.invCode
      );
      this.$set(
        this.tableData[this.optionIndex],
        "invName",
        this.$refs.choice.optionData.invName
      );
      this.$set(
        this.tableData[this.optionIndex],
        "InvStd",
        this.$refs.choice.optionData.specification
      );
      this.equipmentdialog = false;
    },
    // 设备编码点击事件
    async elDialogClick(index) {
      this.equipmentdialog = true;
      this.stockTree()
      this.optionIndex = index;
    },
    async stockTree() {
      this.loading = true;
      const res = await stockTree({})
      if (res.success == "true") {
        this.itemTree = res.data[0];
      }
      this.loading = false;
    },
    async OrganGetStock() {
      this.loading = true;
      const res = await OrganGetStock({
        ...this.pageModel,
      });
      if (res.success == "true") {
        this.$nextTick(() => {
          this.$refs.choice.setPageTotal(res.data[0]);
        });
        this.equipmentData = res.data[1];
      }
      this.loading = false;
    },
    // 分页变化
    onQuery(model) {
      this.pageModel.page = model.page;
      this.pageModel.limit = model.limit;
      this.OrganGetStock();
    },
    // 单元格点击事件
    getCell(row, label) {
      this.selectRow = row;
    },
    // 表格多选
    getSelect(selectTable) {
      this.selectTable = selectTable;
    },
    radioChange(val) {
      this.optionData = val;
      this.radio = val.index;
    },
    //添加
    add() {
      let arr = {
        isCustomMade: true,
        isNewProduct: false,
        invCode: "",
        invName: "",
        cEQCode: "",
        InvStd: "",
        unit: "",
        quantity: "",
        unitPrice: "",
        money: "",
        tax: "",
        taxMoney: "",
        nUnitPeice: "",
        nUnitMoney: "",
        detail_Remark: "",
      };
      this.tableData.push(arr);
    },
    singleSelection(val) {
      this.choiceIndex = val.index;
    },
    async del(row) {
      this.$confirm('确认删除该明细吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (row.mainID && this.$route.query.name == '编辑合同') {
          OrganDelContract({ id: row.detail_ID }).then(res => {
            if (res.success == "true") {
              this.$emit("renovate");
              this.$message({
                message: "删除成功",
                type: "success",
              });
              this.tableData.splice(row.index, 1);
              this.choiceIndex = "false";
              this.$emit('renew')
            }
          })
        } else {
          this.tableData.splice(row.index, 1);
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    duplicate(row) {
      let data = {
        ...row,
        detail_ID: null
      }
      this.tableData.push(JSON.parse(JSON.stringify(data)));
    },
    // 查询
    getTableList(data) {
      console.log("查询");
      // this.xmTableData[0].P_PersonName='徐明泉'
    },
  },
};
</script>

<style>
.el-table th>.cell {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
<style>
.el-table th>.cell {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
<style scoped>
>>>.el-radio__label {
  /* display: none; */
}

>>>.el-table__body-wrapper {
  /* min-height: 300px !important; */
}

.iconButton {
  padding: 10px 12px;
  color: white;
  margin: 5px;
}

.iconButton.add {
  background-color: #409eff !important;
}

.iconButton.del {
  background-color: #f56c6c !important;
}

::v-deep .el-input--medium .el-input__inner {
  padding: 0 5px;
}
</style>